// 1, 设定 写入验证码
$('#sc').html(setVC()).click(function () { $('#sc').html(setVC()) })

// 2, 给 账号input 添加 change事件
$('[name="name"]').change(function () {
    // 调用 async 定义的函数程序
    nameSelect();
})

// 3, 给 注册button 添加 click事件
$('button').click(function () {
    // 调用 async 定义的函数程序
    register();
})

// 验证账号是不是重复的请求
async function nameSelect() {
    // 获取 标签的数据
    let name = $('[name="name"]').val();

    // 使用 await 执行 封装的promise请求
    const res = await myPromiseJQueryAjax('../server/goods_select.php', 'post', { userName: name }, 'json');

    // 根据响应体结果 写入提示信息
    if (res.code === 1) {
        $('[name="nameSpan"]').html('<span style="color:blue">您的账号可以使用</span>');
    } else if (res.code === 0) {
        $('[name="nameSpan"]').html('<span style="color:red">您的账号重复,不能使用</span>');
    }

}

// 注册账号的请求
async function register() {
    //  获取数据
    let name = $('[name="name"]').val();
    let pwd1 = $('[name="pwd1"]').val();
    let pwd2 = $('[name="pwd2"]').val();
    let vc = $('[name="vc"]').val();

    //  执行简单的验证
    //  两次的密码必须要完全相同
    if (pwd1 === pwd2) {
        // 两次密码相同 删除错误的提示信息
        $('[name="pwd1Span"]').html('');

    } else {
        // 两次密码不同 输入提示信息
        $('[name="pwd1Span"]').html('<span style="color:red">您两次输入的密码不相同</span>');
        // 通过 return 终止之后程序的执行
        return;
    }

    //  验证码 必须相同
    //  如果区分大小写 直接 执行 ===全等比较判断
    //  如果不区分大小写 先统一大小写 再进行 ===全等比较判断
    //  input标签输入的数据 和 span标签写入的内容 进行比较判断
    if (vc.toLowerCase() === $('#sc').html().toLowerCase()) {
        // 删除错误提示信息
        $('[name="vcSpan"]').html('');
    } else {
        // 输入错误提示信息
        $('[name="vcSpan"]').html('<span style="color:red">您输入的验证码错误</span>');
        // 刷新验证码
        $('#sc').html(setVC());
        // 通过 return 终止之后程序的执行
        return;
    }

    // 发行请求 执行注册操作
    const res = await myPromiseJQueryAjax('../server/goods_register.php', 'post', { userName: name, userPwd: pwd1, }, 'json');
    console.log(res);

    // 根据res结果 执行不同的操作
    if (res.code === 1) {
        // 注册成功

        // 可以向 cookie 存储 账号密码 但是一般cookie不会存储 关键敏感信息
        // // 设定账号cookie
        // mySetCookie( 'userName' , name , 24*60*60*1000 , '/' );
        // // 设定密码cookie
        // mySetCookie( 'userPwd' , pwd1 , 24*60*60*1000 , '/' );

        // 向 cookie 存储 新注册账号的 id 值
        // 登录时 根据 id 数值 获取 对应的 账号密码 
        mySetCookie('id', res.id, 24 * 60 * 60 * 1000, '/');

        // 向 localStorage 存储 新注册账号的 id 值
        localStorage.id = res.id;

        // 变量储存倒计时时间
        let num = 5;

        // 注册成功 写入提示信息 点击跳转登录页面 等待5秒跳转首页面
        $('[name="result"]').html(`恭喜您注册成功,${num}秒后跳转首页面,点击跳转<a href="./login.html?name=张三&pwd=123">登录页</a>`);

        // 倒计时效果
        let time = setInterval(function () {
            // 倒计时变量数值 --
            num--;
            // 写入新内容
            $('[name="result"]').html(`恭喜您注册成功,${num}秒后跳转首页面,点击跳转<a href="./login.html?name=张三&pwd=123">登录页</a>`);
            // 如果倒计时为 0 
            if (num === 0) {
                // 清除定时器
                clearInterval(time);
                // 跳转首页面
                window.location.href = './index.html';
            }
        }, 1000);

    }
}

/*
        需求分析
          点击 注册button按钮 执行 注册新账号操作

          1,  需要生成验证码

            实际项目中 是和 第三方运行商合作 
            向一个固定的数据接口发送请求

            目前自己本地生成一个简单的验证码做一个简单的验证
            使用之前定义的验证码函数生成随机6位验证码
      
          2,  输入账号 验证账号是不是已经存在

            失去焦点,并且数据改变时 向 后端程序发送请求
            根据 后端程序 返回的结果 判断 当前用户名是不是已经存在

            给 账号input 添加 change事件 
            向 server/goods_select.php 文件发送请求
              以 post 方式 携带 1个 参数 
              键名是 userName
              响应体结果是json字符串

          3,  输入账号 密码 确认密码 验证码 完成注册操作
            点击 注册button按钮 向后端程序发送请求
            根据 后端程序 返回的结果 判断 注册是不是成功

            给 注册button按钮 添加 click事件
            向 server/goods_register.php 文件发送请求
              以 post 方式 携带 2个 参数 
              键名是 userName userPwd
              响应体结果是json字符串

            如果注册成功 
              存储 新注册用户的id主键值
              登录时用于查询新注册用户的账号密码

      
        特别说明:
          当前是通过 nginx 服务器运行文件
          nginx服务器会缓存你执行的文件内容
          即使你对文件内容做出修改 nginx服务器仍然会执行旧文件内容(也就是缓存的文件内容)

          此时 你需要 清除 浏览器缓存 再次刷新页面
      
      */
